import React, { Component } from 'react';
import { Input, Button, List } from 'antd';
import 'antd/dist/antd.css';
import store from './store/index';
import { getInputChangeAciton, getClickBtnAction, getDeleteItemAction, getListAction} from './store/actionCreator.js'

class TodoListTest extends Component {
  //当组件的state或者props发生改变的时候，render函数就会重新执行
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    // this.handleItemDelete = this.handleItemDelete.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }

  render() {
    return (
        <div>
          <Input
            placeholder='auto'
            style={{width: '200px', marginRight: '10px'}}
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
          <List
            style={{marginTop: '10px', width: '350px'}}
            bordered
            dataSource={this.state.list}
            renderItem={(item, index) => (<List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>)}
          />
        </div>
    )
  }

  componentDidMount() {
    const action = getListAction();
    store.dispatch(action);
  }

  handleInputChange(e) {
    const action = getInputChangeAciton(e.target.value);
    store.dispatch(action)
  }

  handleBtnClick() {
    const action = getClickBtnAction()
    store.dispatch(action)
  }

  handleItemDelete(index) {
    const action = getDeleteItemAction(index)
    store.dispatch(action)
  }

  handleStoreChange() {
    this.setState(store.getState())
  }
}

export default TodoListTest;